<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<body>
    <table border="3px" id="p">
      <caption>个人简历</caption>
      <tr>
        <td>照片:</td>
        <td id="td1"></td>
      </tr>
      <tr>
        <td>姓名:</td>
        <td id="td2"></td>
      </tr>
      <tr>
        <td>年龄</td>
        <td id="td3"></td>
      </tr>
      <tr>
        <td>好友</td>
        <td id="td4"></td>
      </tr>
    </table>
</body>
<script>
  let person={
    name:'传奇',
    age:16,
    friends:[
            '路飞','索隆','娜美','张飞'
           ],   
    imgUrl:'../img/fcq.jpg'
  };

  let pic = document.getElementById("td1");
  let picture = document.createElement("img");
  picture.src=person.imgUrl;
  picture.width=200;
  pic.append(picture);

  let name = document.getElementById("td2");
  name.innerText=person.name;

  let age = document.getElementById("td3");
  age.innerText=person.age;

  let friend = document.getElementById("td4");
  let flists = document.createElement("ul");
  for (let s of person.friends) {
    var flist = document.createElement("li");
    flist.innerText=s;
    flists.append(flist);
  }
  friend.append(flists);
</script>

</body>
</html>